<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="btnClickHandler()">云图+颜色</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ],
            camera: { "position": { "x": 114.81913390728857, "y": 25.968339758431096, "z": 3191460.283702596 }, "angle": { "heading": 360, "pitch": -89.85, "roll": 0 } }
        });
        function btnClickHandler() {
            var material = new cpc.MaterialImageSlide({
                color: Cesium.Color.YELLOW,
                duration: 1000,
                images: [
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160600.HDF.png",
                        xx: "其他属性",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160700.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160800.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160900.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010161000.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010161300.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010161900.HDF.png",
                    },
                    {
                        url:
                            ".../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010162100.HDF.png",
                    },
                ],
            });
            createPolygon(material, 50, 0, 145, 60);
        }
        //线
        function createPolyline(material, lon = 0, lat = 0, height = 2500, width = 3) {
            var entity = map.viewer.entities.add({
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                        lon,
                        lat,
                        height,
                        lon + 3,
                        lat,
                        height,
                        lon + 3,
                        lat + 10,
                        height,
                    ]),
                    width: width,
                    material: material,
                },
            });
        }
        //面
        function createPolygon(
            material, west = 0,
            south = 10,
            east = 10,
            north = 20,
            height = 6e3
        ) {
            map.viewer.entities.add({
                rectangle: {
                    coordinates: Cesium.Rectangle.fromDegrees(west, south, east, north),
                    material: material,
                    height: height,
                },
            });
        }
        //圆
        function createEllipse(
            material,
            lon = 0,
            lat = 30,
            height = 100,
            semiMinorAxis = 250000,
            semiMajorAxis = 250000
        ) {
            map.viewer.entities.add({
                name: "动员",
                position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
                ellipse: {
                    height: height,
                    semiMinorAxis: semiMinorAxis,
                    semiMajorAxis: semiMajorAxis,
                    material: material,
                },
            });
        }
        //球
        function createEllipsoid(
            material,
            lon = 0,
            lat = 20,
            height = 100,
            maximumCone = 180,
            radii = [900000, 900000, 900000]
        ) {
            map.viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
                ellipsoid: {
                    radii: new Cesium.Cartesian3(...radii), //椭球的半径--x,y,z
                    maximumCone: Cesium.Math.toRadians(180), //椭圆形的最大圆锥角的属性
                    material: material,
                },
            });
        }
        // 墙
        function createWall(material, lon = 0, lat = 0, height = 250000, width = 3) {
            var entity = map.viewer.entities.add({
                wall: {
                    maximumHeights: [height, height, height],
                    minimumHeights: [0, 0, 0],
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                        lon,
                        lat,
                        height,
                        lon + 3,
                        lat,
                        height,
                        lon + 3,
                        lat + 10,
                        height,
                    ]),
                    material: material,
                },
            });
            map.viewer.flyTo(entity);
        }
    </script>
</body>

</html>